<template>
  <el-table
    :data="lists"
    border
    stripe
    :tree-props="tp"
    style="width: 100%"
    :row-key="rowKey"
  >
    <el-table-column
      v-for="(item, index) in column"
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
      :align="item.align"
      :type="item.type"
      :key="index"
    >
      <template #default="{ row, index }" v-if="item.slot">
        <slot :row="row" :index="index" :name="item.slot"></slot>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-pagination
    v-if="value"
    @size-change="sizeChange"
    @current-change="currentChange"
    :current-page="value.pagenum"
    :page-sizes="[1, 2, 3, 4, 5, 6]"
    :page-size="value.pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  ></el-pagination>
</template>

<script>
export default {
  name: "Table",
  props: {
    /**
     * 总条数
     */
    total: Number,
    tp: {
      /**
       * 嵌套对象
       */
      type: Object,
      default: () => ({ hasChildren: "hasChildren", children: "children" }),
    },
    column: {
      required: true,
      type: Array,
      default: () => {},
    },
    value: Object,
    lists: {
      required: true,
      type: Array,
      default: () => [],
    },
    /**
     * rowKey
     */
    rowKey: {
      type: String,
      default: "id",
    },
  },
  setup(props, { emit }) {
    /**
     * 分页或页码更改事件
     */
    const sizeChange = (val) => {
      // console.log(49, val);
      emit("size", val);
    };
    const currentChange = (val) => {
      emit("current", val);
    };
    return { sizeChange, currentChange };
  },
};
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 10px;
  margin-bottom: 15px;
}
</style>